<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环指令v-for</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 
            循环指令v-for：列表渲染，遍历容器(列表、集合)元素或对象的属性

            <标签 v-for="变量名 in 集合模型数据">
                {{变量名}}
            </标签>
            要循环哪个标签，就把v-for指令写在哪个标签上

            


         -->

         <!-- 不带索引值遍历 -->
         <span v-for="n in names" >
            {{n}}
         </span>

         <!-- 带索引值遍历
        如果要加索引：
            <标签 v-for="(变量名,索引值变量) in 集合模型数据">
              {{变量名}},{{索引值变量}}
            </标签>
        
        -->
         <div v-for="(n,i) in names" >
            {{n}}---{{i}}
         </div>




    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                names:["张三","李四","王五","赵六","刘启","张伟大","徐波"]
            }
        })
    </script>
</body>
</html>